<template>
    <div>
<table>
    <tr>
        <td>名称</td>
        <td>图片</td>
        <td>账号</td>
        <td>密码</td>
        <td>确认密码</td>
        <td>性别</td>
        <td>电话</td>
        <td>类型</td>
        <td>时间</td>
    </tr>
    <tr v-for="item in list">
        <td>{{item.mname}}</td>
        <td><img :src="item.image" alt="" width="50px" height="50px"></td>
        <td>{{item.mzhanghao}}</td>
        <td>{{item.mpwd}}</td>
        <td>{{item.msex}}</td>
        <td>{{item.mpwds}}</td>
        <td>{{item.mphone}}</td>
        <td>{{item.mleixin}}</td>
        <td>{{item.mdate.substr(0,10)}}</td>
    </tr>
</table>
<a>
    共有{{ count }}页 共有{{ pcount }}条每页显示{{ state.size }}条 当前{{ state.index }}页
    <input type="button" value="首页" @click="fenye(0)">
    <input type="button" value="上一页" @click="fenye(-1)">
    <input type="button" value="下一页" @click="fenye(1)">
    <input type="button" value="尾页" @click="fenye(9)">
</a>
    </div>
</template>

<script setup lang="ts">
import { reactive,onMounted,toRefs } from 'vue';
import  {useRoute, useRouter} from 'vue-router'
import axios from 'axios';
const route = useRoute()
const router = useRouter()
const data:any = reactive({
    state:{
        mname:'',
        index:1,
        size:2,
    },
    list:[],
    count:0,
    pcount:0,

    
})
const {state,list,count,pcount} = toRefs(data)

onMounted (()=>{
    ashowmems()
})

const ashowmems = ()=>{
    axios({
        url:'https://localhost:7297/api/Member/ShowMember',
        method:'get',
        params:state.value
        
        
        
    }).then((res)=>{
        list.value = res.data.data
        count.value = res.data.count
        pcount.value = res.data.pcount
    })
}
const fenye = (i: number) => {
    if (i == 0) {
        state.value.index = 1;
    }
    if (i == -1 || i == 1) {
        if (i == -1 && state.value.index == 1) {
            return;
        }
        if (i == 1 && state.value.index == pcount.value) {
            return;
        }
        state.value.index += i;
    }
    if (i == 9) {
        state.value.index = pcount.value;
    }
    ashowmems();
}






</script>

<style scoped>

</style>